<!--近七天天气-->
<script setup>
import {onMounted, ref, watch} from "vue";
import * as echarts from "echarts";
const props=defineProps({
  sevenDayWeather:{
    type:Array,
    default:()=>[]
  }
})
const lastWeather=ref(null)
// let weatherName = ["晴","小雨","阴","暴雨","多云","大雨","小雨"];
let weatherName=[]
// let date=["01.25","01.26","01.27","01.28","01.29","01.30","01.31"];
// let week=["周一","周二","周三","周四","周五","周六","周日"];
// let high_temperature=["16.3","16.2","17.6","14.2","17.6","15.7","14.3"];
// let low_temperature=["13.4","12.8","13.5","12.5","12.4","13.2","13"];
const option=ref({
  title: {
    text: '近七天的天气情况',
    textStyle: {
      fontSize:22,
      fontWeight: 'bold',
    },
    left: 'center',
    top:'10px',
  },
  grid: {
    show: true,
    backgroundColor: 'transparent',
    opacity: 0.3,
    borderWidth: '0',
    top: '70%',//70%
    bottom: '0%',
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    show: false
  },
  dataZoom: [
    {
      type: 'inside',
      show: true,
      xAxisIndex: [0, 1, 2],
      start: 0,
      filterMode: 'empty'
    }
  ],
  xAxis: [
    // 日期
    {
      type: 'category',
      boundaryGap: false,
      position: 'top',
      offset: 180,
      zlevel: 100,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        formatter: [
          '{a|{value}}'
        ].join('\n'),
        rich: {
          a: {
            fontSize: 19
          }
        }
      },
      nameTextStyle: {

      },
      data: []
    },
    // 星期
    {
      type: 'category',
      boundaryGap: false,
      position: 'top',
      offset: 130,
      zlevel: 100,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        formatter: [
          '{a|{value}}'
        ].join('\n'),
        rich: {
          a: {
            // color: 'white',
            fontSize: 17
          }
        }
      },
      nameTextStyle: {
        fontWeight: 'bold',
        fontSize: 20
      },
      data: []
    },
    // 天气图标
    {
      type: 'category',
      boundaryGap: false,
      position: 'top',
      offset: 30,//
      zlevel: 100,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        formatter: function(value, index) {
          return '{' + value + '| }\n{b|' + weatherName[value] + '}'
        },
        rich: {
          //数据实例
          // 0: {
          //   backgroundColor: {
          //     image: `https://d.scggqx.com/forecast/img/${weatherName[0]}.png`
          //   },
          //   height: 50,
          //   width: 50
          // },
        }
      },
      nameTextStyle: {
        fontWeight: 'bold',
        fontSize: 20
      },
      data: [0,1,2,3,4,5,6]
    }
  ],
  yAxis: {
    type: 'value',
    show: false,
    axisLabel: {
      formatter: '{value} °C',
      color: 'white'
    }
  },
  series: [
    {
      name: '最高气温',
      type: 'line',
      data: [],//high_temperature
      symbol: 'emptyCircle',
      symbolSize: 12,
      showSymbol: true,
      smooth: true,
      itemStyle: {
        normal: {
          color: '#C95843'
        }
      },
      label: {
        show: true,
        position: 'top',
        // color: 'white',
        formatter: '{c} °C'
      },
      lineStyle: {
        width: 1,
        // color: 'white'
      },
      areaStyle: {
        opacity: 1,
        color: 'transparent'
      }
    },
    {
      name: '最低气温',
      type: 'line',
      data: [],//low_temperature
      symbol: 'emptyCircle',
      symbolSize: 12,
      showSymbol: true,
      smooth: true,
      itemStyle: {
        normal: {
          color: 'blue'
        }
      },
      label: {
        show: true,
        position: 'bottom',
        formatter: '{c} °C'
      },
      lineStyle: {
        width: 1,
      },
      areaStyle: {
        opacity: 1,
        color: 'transparent'
      }
    }
  ]
})
onMounted(()=>{
  let myChart = echarts.init(lastWeather.value, null, {
    renderer: 'canvas',
    useDirtyRect: false
  });
  myChart.setOption(option.value);
  watch(props,()=>{
    console.log(weatherName)
    //天气类型
    weatherName=props.sevenDayWeather.map(item=>item.weather)
    //日期
    option.value.xAxis[0].data=props.sevenDayWeather.map(item=>item.date)
    //星期
    option.value.xAxis[1].data=props.sevenDayWeather.map(item=>item.week)
    //最高温
    option.value.series[0].data=props.sevenDayWeather.map(item=>item.high_temperature)
    //最低温
    option.value.series[1].data=props.sevenDayWeather.map(item=>item.low_temperature)
    //图标
    Object.keys(props.sevenDayWeather).forEach((v,i)=>{
      console.log(weatherName[i])
      option.value.xAxis[2].axisLabel.rich[i]={
        backgroundColor:{
          image:`https://d.scggqx.com/forecast/img/${weatherName[i]}.png`
        },
        height:50,
        width:50
      }
    })
    option.value.xAxis[2].axisLabel.rich["b"]={
      fontSize: 15,
      lineHeight: 30,
      height: 20
    }
    myChart.setOption(option.value)
  })
//窗口变化更改Chart大小
  window.addEventListener('resize', myChart.resize);
})
</script>

<template>
    <div class="weather-left1" id="weather-left1" ref="lastWeather">
    </div>
</template>

<style scoped>
.weather-left1{
  padding-top: 30px;/*原30px*/
  /*margin-top: 30px;*/
}
</style>
<!--2024/2/6 19:11-->